<template>
    <div class="detail-header">
        <div class="header" :style="css_header" v-show="!show_btn">
            <span>景点详情</span>
            <i class="iconfont icon-fanhui" @click="turnTo"></i>
        </div>
        <div class="btn" v-show="show_btn" @click="turnTo"><i class="iconfont icon-fanhui"></i></div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                show_btn: true,
                css_header: {
                    opacity: 0
                }
            }
        },
        methods: {
            scroll () {
                let top = document.body.scrollTop||document.documentElement.scrollTop
                let opacity = top/140
                opacity = opacity>1?1:opacity
                // console.log(top, opacity)
                this.css_header = {opacity}
                if (top>60) {
                    this.show_btn = false
                } else {
                    this.show_btn = true
                }
            },
            turnTo () {
                this.$router.push('/')
            }
        },
        mounted () {
            window.addEventListener('scroll', this.scroll)
        },
        activated () {
            window.addEventListener('scroll', this.scroll)
        },
        deactivated () {
            window.removeEventListener('scroll', this.scroll)
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/style/varibles.styl'

    .detail-header
        position fixed
        top 0
        width 100%
        max-width 750px
        .header
            color #ffffff
            height $header_H
            line-height $header_H
            text-align center
            background $blue
            i
                position absolute
                width $header_H*2
                height $header_H
                left 0
                font-size .24rem
                top 0
                text-align left 
                padding-left .33rem
        .btn
            border-radius .4rem
            width .8rem
            height .8rem
            display flex
            justify-content center
            align-items center
            background #000
            position absolute
            color #fff
            top .3rem
            left .3rem
            opacity .6
            i
                font-weight bolder
</style>
